<template>

  <div :id="pickup" ref="map" style="width: 150px; height: 150px; margin-bottom: 20px" />

</template>

<script>
import * as echarts from 'echarts' // 引入所有的echarts
import 'echarts-liquidfill'
export default {
  props: {
    pickup: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      value: 42,
      color: '#e35c3f'

    }
  },
  watch: {
    data: function(newVal, oldVal) {
      this.judgment()
      this.drawMap()
    }
  },

  mounted() {
    // 获取展示的数据 设置给图表
    this.myMap = echarts.init(document.getElementById(this.pickup))
    this.judgment()
    this.drawMap()
  },
  methods: {
    drawMap() {
      const option = {
        backgroundColor: '#ffffff',
        title: {
          text: this.value + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: '22',
            fontWeight: '400',

            color: '#292b31'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            amplitude: 6,
            itemStyle: {
              shadowBlur: 0,
              shadowColor: 'rgba(0, 0, 0, 0)'
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.color
                  }
                ]
              }
            ],
            data: [this.value / 100], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: '#ffe5e0'
            },
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              // show: false
              borderDistance: 8,
              itemStyle: {
                borderWidth: 2,
                borderColor: this.color
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.myMap.setOption(option)
    },
    judgment() {
      if (this.pickup === 'Pickup') {
        this.value = this.data.waitingPickupRate
        this.color = '#e35c3f'
      }
      if (this.pickup === 'Delivery') {
        this.value = this.data.waitingDispatchRate
        this.color = '#ffc45e'
      }
      if (this.pickup === 'Unassigned') {
        this.value = this.data.unassignedTransportTaskRate
        this.color = '#ff9b41'
      }
      if (this.pickup === 'Timeout') {
        this.value = this.data.timeoutTransportTaskRate
        this.color = '#edde83'
      }
    }
  }
}
</script>

<style>
</style>
